<template>
    <div class="content">
        <div class="time">
            实时数据
            <span>{{time}}</span>
        </div>
        <div class="main" v-loading="loading">
            <div class="mt20 overall tabs" v-if="overall">
                <div class="header">
                    <span class="active">总体情况</span>
                </div>
                <div class="cont clearfix">
                    <div class="list">
                        <div class="name">确诊</div>
                        <div class="clearfix">
                            <div class="today">
                                今日
                                <span class="num">{{overall.cuCoYday}}</span>
                            </div>
                            <div class="account">
                                累计
                                <span class="num">{{overall.cuConfirmed}}</span>
                            </div>
                        </div>
                        <div class="compare">
                            较昨日 <span :class="{plus: overall.diagnosiscy > 0,minus: overall.diagnosiscy < 0}">
                            {{overall.diagnosiscy > 0 ? ('+'+overall.diagnosiscy) : (overall.diagnosiscy == 0 ? '-' : (overall.diagnosiscy))}}
                        </span>
                        </div>
                    </div>
                    <div class="list">
                        <div class="name">死亡</div>
                        <div class="clearfix">
                            <div class="today">
                                今日
                                <span class="num">{{overall.cuDeYday}}</span>
                            </div>
                            <div class="account">
                                累计
                                <span class="num">{{overall.cuDeath}}</span>
                            </div>
                        </div>
                        <div class="compare">
                            较昨日 <span :class="{plus: overall.deathcy > 0,minus: overall.deathcy < 0}">
                            {{overall.deathcy > 0 ? ('+'+overall.deathcy) : (overall.deathcy == 0 ? '-' : (overall.deathcy))}}
                        </span>
                        </div>
                    </div>
                    <div class="list">
                        <div class="name">治愈</div>
                        <div class="clearfix">
                            <div class="today">
                                今日
                                <span class="num">{{overall.cuCuYday}}</span>
                            </div>
                            <div class="account">
                                累计
                                <span class="num">{{overall.cuCure}}</span>
                            </div>
                        </div>
                        <div class="compare">
                            较昨日 <span :class="{plus: overall.curecy > 0,minus: overall.curecy < 0}">
                            {{overall.curecy > 0 ? ('+'+overall.curecy) : (overall.curecy == 0 ? '-' : (overall.curecy))}}
                        </span>
                        </div>
                    </div>
                </div>
            </div>
            <!--            <div class="mt20 trend tabs" v-if="mapParam[0]">-->
            <div class="mt20 trend tabs">
                <div class="cont">
                    <div class="chart" ref="chart"></div>
                </div>
            </div>
            <div class="mt20 tabs">
                <div class="cont">
                    <div class="line">出入情况</div>
                    <table-example ref="table" :data="tableData" :tableColumn="header" :slotColumns="slotColumns"
                                   :stripe="true" class="table">
                        <template slot="in" slot-scope="scope">
                            <el-link type="primary" :underline="false">{{scope.row.in}}</el-link>
                        </template>
                        <template slot="out" slot-scope="scope">
                            <el-link type="primary" :underline="false">{{scope.row.out}}</el-link>
                        </template>
                        <template slot="inOutTwice" slot-scope="scope">
                            <el-link type="primary" :underline="false" class="error">{{scope.row.inOutTwice}}</el-link>
                        </template>
                    </table-example>
                    <div class="mt20">
                        <page :data="page" @jumpPage="getList"></page>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import tableExample from '../components/table'
    import page from '../components/pagination'
    import chart from '../components/chart'

    export default {
        data() {
            return {
                time: this.$filter.timeFormat((new Date()), 'HH:mm:ss'),
                items: {
                    grid: {
                        left: '2%',
                        top: 80,
                        bottom: 20,
                        right: '3%',
                        containLabel: true
                    },
                    legend: {
                        data: ['健康码总数', '绿码数', '黄码数', '红码数'],
                        align: 'left',
                        left: '2%',
                        top: 10,
                        icon: 'rect'
                    },
                    xAxis: {
                        show: true, // 横坐标显示与隐藏
                        data: [],
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#999'
                            }
                        }
                    },
                    yAxis: {
                        show: true, // 纵坐标显示与隐藏
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    series: [
                        {
                            name: '健康码总数',
                            type: 'line',
                            symbol: 'none',
                            areaStyle: {},
                            z: 1,
                            data: []
                        },
                        {
                            name: '绿码数',
                            type: 'line',
                            symbol: 'none',
                            areaStyle: {},
                            z: 2,
                            data: []
                        },
                        {
                            name: '黄码数',
                            type: 'line',
                            symbol: 'none',
                            areaStyle: {},
                            z: 3,
                            data: []
                        },
                        {
                            name: '红码数',
                            type: 'line',
                            symbol: 'none',
                            areaStyle: {},
                            z: 4,
                            data: []
                        }
                    ],
                    textStyle: {},
                    color: ['#6495F9', '#96F050', '#F9DF63', '#FF4F4F']
                },
                overall: null,
                charts: null,
                trendList: [
                    {
                        label: '确诊',
                        active: true
                    },
                    {
                        label: '疑似',
                        active: false
                    },
                    {
                        label: '死亡',
                        active: false
                    },
                    {
                        label: '治愈',
                        active: false
                    }
                ],
                tableData: [],
                header: [
                    {
                        prop: 'comminutyName',
                        label: '出入场所',
                        minWidth: '250',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'in',
                        label: '进入人数',
                        minWidth: '100',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'out',
                        label: '出去人数',
                        minWidth: '100',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'inOutTwice',
                        label: '当天进出超过2次',
                        minWidth: '120',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'managerName',
                        label: '场所负责人',
                        width: '100',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'managerPhone',
                        label: '负责人联系方式',
                        align: 'center',
                        minWidth: '150'
                    }
                ],
                slotColumns: ['in', 'out', 'inOutTwice'],
                page: {},
                max: 0,
                loading: false,
                index: 1,
                mapParam: [] // 地图数据
            }
        },
        mounted() {
            this.getDate()
            this.getList()
        },
        methods: {
            getDate() {
                this.loading = true
                this.$http.get('/ncovArea/selectNcovArea?area=黑龙江&code=230000').then(result => {
                    if (result.success && result.data) {
                        this.loading = false
                        if (result.data.populationParam) this.overall = result.data.populationParam
                        if (result.data.codeCountParam) {
                            this.items.xAxis.data = result.data.codeCountParam.map(e => {
                                return e.date
                            })
                            this.items.series[0].data = result.data.codeCountParam.map(e => {
                                return e.g.counts + e.y.counts + e.r.counts
                            })
                            this.items.series[1].data = result.data.codeCountParam.map(e => {
                                return e.g.counts
                            })
                            this.items.series[2].data = result.data.codeCountParam.map(e => {
                                return e.y.counts
                            })
                            this.items.series[3].data = result.data.codeCountParam.map(e => {
                                return e.r.counts
                            })
                            this.init()
                        }
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            init() {
                let options = this.items || {}, _this = this
                if (this.$refs.chart) {
                    this.charts = this.$echarts.init(this.$refs.chart)
                    window.addEventListener('resize', function () {
                        _this.charts.resize()
                    })
                    this.charts.setOption(options)
                }
            },
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/ncovArea/communityActionPage', {
                    current: this.index || 1,
                    size: 15,
                    code: 230000
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            }
        },
        components: {
            tableExample,
            chart,
            page
        }
    }
</script>

<style scoped lang="less">
    .time {
        border-bottom: .01rem solid #dcdff6;
        line-height: .48rem;
        font-size: .16rem;
        padding: 0 .3rem;
    }

    /deep/ .main {
        padding: .3rem;

        .el-tabs {
            box-shadow: none;
        }

        .tabs {
            border: .01rem solid #dcdff6;

            .header {
                overflow: hidden;
                background-color: #f5f7fa;
                border-bottom: .01rem solid #dcdff6;

                span {
                    float: left;
                    padding: 0 .2rem;
                    line-height: .4rem;
                    cursor: pointer;

                    &.active {
                        color: #fff;
                        background-color: #447ed9;
                        border-color: transparent;
                    }
                }
            }

            .cont {
                padding: .1rem .2rem;
            }
        }

        .overall {
            .header {
                span.active {
                    color: inherit;
                    background-color: inherit;
                    border-color: transparent;
                }
            }

            .cont {
                padding: 0;

                .list {
                    float: left;
                    width: 33.33%;
                    padding: .2rem;
                    border-right: .02rem solid #dcdff6;

                    &:last-child {
                        border-right: 0 none;
                    }

                    .name {
                        margin-bottom: .05rem;
                        font-size: .16rem;
                        font-weight: bolder;
                    }

                    .today, .account {
                        float: left;
                        width: 40%;
                        padding-left: .2rem;
                        font-size: .14rem;

                        .num {
                            display: inline-block;
                            font-size: .28rem;
                            font-weight: bolder;
                            margin-left: .1rem;
                            vertical-align: sub;
                        }
                    }

                    .compare {
                        margin-top: .05rem;
                        font-size: .14rem;
                        padding-left: .2rem;

                        .plus {
                            color: #ff5353;
                        }

                        .minus {
                            color: #17c15b;
                        }
                    }

                    &:nth-child(1) {
                        .num {
                            color: #f7a200;
                        }
                    }

                    &:nth-child(2) {
                        .num {
                            color: #ff5353;
                        }
                    }

                    &:nth-child(4) {
                        .num {
                            color: #17c15b;
                        }
                    }
                }
            }
        }

        .trend {
            .cont {
                padding: 0;
                height: 4.2rem;
                width: 100%;
                position: relative;

                .chart {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .line {
            line-height: .4rem;
            padding-left: .08rem;
            position: relative;

            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: .03rem;
                height: .18rem;
                margin-top: .11rem;
                background-color: #999;
            }
        }

        .table {
            .error {
                color: #e00000;
            }
        }
    }
</style>
